@import "src/sass/global/mixin";

.Audio{
  position: relative;
  width: 40px;

  .pgs{
    width: 40px;
    background-color: #E3E8EE;
    text-align: center;
    position: relative;
    overflow: hidden;

    .pgs-play{
      position: absolute;
      top:1px;
      left: 4.65%;
      width: 0;
      height: 32px;
      background-color: $blue;
      z-index: 1;
    }
    img{
      width: 326px;
      position: relative;
      z-index: 2;
      margin-top: -1px;
    }
  }
  .audio-name{
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    text-align: center;
    color: #666;
    font-size: 12px;
  }
  .controls{
    width: 100%;
    height: 40px;
    padding: 0;
    text-align: center;

    .a-play {
      border: none;
      background: transparent;
      outline: none;
      padding: 0;
    }

    .icon-pause-one{
      border: 0;
      outline: 0;
      padding: 0;
      width: 40px;
      height: 40px;
      @include background('{{WIMAGE}}/play-01.gif',40px,40px);
      display: block;
      vertical-align: middle;
    }
    .icon-pause-static{
      border: 0;
      outline: 0;
      padding: 0;
      width: 40px;
      height: 40px;
      @include background('{{WIMAGE}}/pause-02.png',40px,40px);
      display: block;
      vertical-align: middle;
    }
    .icon-play-one{
      width: 40px;
      height: 40px;
      display: block;
      color: $blue;
      @include background('{{WIMAGE}}/pause-01.gif',40px,40px);
      background-size: 40px 40px;
    }
    .icon-play-static{
      width: 40px;
      height: 40px;
      display: block;
      color: $blue;
      @include background('{{WIMAGE}}/play-02.png',40px,40px);
      background-size: 40px 40px;
    }
    .icon-pause{
      font-size: 36px;
      width: 40px;
      height: 40px;
      display: block;
      color: $blue;
    }
    span{
      color: $lightgray;
      font-size: 12px;
      display: inline-block;
      width: 40px;
      text-align: center;
    }
    .audio-time{
      display: inline-block;
      vertical-align: middle;
    }
  }
}